<template>
  <a-modal title="动态表单配置" :width="680" :visible="visible" @ok="handleModalConfirm" @cancel="handleModalCancel"
    :confirm-loading="modalLoading">
    <a-form-model :model="form" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
      <a-collapse v-model="activeKey" :bordered="false">
        <template #expandIcon="props">
          <a-icon type="caret-right" :rotate="props.isActive ? 90 : 0" />
        </template>
        <a-collapse-panel key="1" header="身份信息">
          <a-form-model-item label="姓名">
            <a-input v-model="form.name" :min="0" disabled />
          </a-form-model-item>
          <a-form-model-item label="年龄">
            <a-input-number v-model="form.age" :min="0" placeholder="请输入" style="width: 100%" />
          </a-form-model-item>
          <a-form-model-item label="性别">
            <a-radio-group v-model="form.sex">
              <a-radio :value="1">男</a-radio>
              <a-radio :value="0">女</a-radio>
            </a-radio-group>
          </a-form-model-item>
        </a-collapse-panel>
        <a-collapse-panel key="2" header="资产情况">
          <a-form-model-item label="借款额度">
            <a-radio-group v-model="form.loanAmount">
              <a-radio value="50000">50000</a-radio>
              <a-radio value="100000">100000</a-radio>
              <a-radio value="200000">200000</a-radio>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item label="房屋信息">
            <a-radio-group v-model="form.house">
              <a-radio value="有">有</a-radio>
              <a-radio value="无">无</a-radio>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item label="车辆信息">
            <a-radio-group v-model="form.car">
              <a-radio value="有">有</a-radio>
              <a-radio value="无">无</a-radio>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item label="公积金">
            <a-radio-group v-model="form.accumulation">
              <a-radio value="六个月以上">六个月以上</a-radio>
              <a-radio value="六个月以下">六个月以下</a-radio>
              <a-radio value="无">无</a-radio>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item label="芝麻分">
            <a-radio-group v-model="form.sesameSeed">
              <a-radio value="700以上">700以上</a-radio>
              <a-radio value="650-699以内">650-699以内</a-radio>
              <a-radio value="600-649以内">600-649以内</a-radio>
              <a-radio value="600以下">600以下</a-radio>
            </a-radio-group>
          </a-form-model-item>
        </a-collapse-panel>
        <a-collapse-panel key="3" header="完善信息" :disabled="false">
          <a-form-model-item label="逾期情况">
            <a-radio-group v-model="form.overdueSituation">
              <a-radio value="无逾期">无逾期</a-radio>
              <a-radio value="有逾期">有逾期</a-radio>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item label="职业">
            <a-radio-group v-model="form.profession">
              <a-radio value="上班族">上班族</a-radio>
              <a-radio value="公务员-事业单位">公务员-事业单位</a-radio>
              <a-radio value="私营企业主">私营企业主</a-radio>
              <a-radio value="自由职业">自由职业</a-radio>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item label="社保">
            <a-radio-group v-model="form.socialSecurity">
              <a-radio value="有">有</a-radio>
              <a-radio value="无">无</a-radio>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item label="保险">
            <a-radio-group v-model="form.insurance">
              <a-radio value="有">有</a-radio>
              <a-radio value="无">无</a-radio>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item label="花呗额度">
            <a-radio-group v-model="form.huabei">
              <a-radio value="有">有</a-radio>
              <a-radio value="无">无</a-radio>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item label="京东白条额度">
            <a-radio-group v-model="form.jdQuota">
              <a-radio value="有">有</a-radio>
              <a-radio value="无">无</a-radio>
            </a-radio-group>
          </a-form-model-item>
        </a-collapse-panel>
      </a-collapse>
    </a-form-model>
  </a-modal>
</template>

<script>
import * as Ajax from '@/api/institution';
export default {
  props: {
    visible: {
      type: Boolean,
    },
    id: {
      type: [String, Number],
    },
    default: {
      type: Object,
      default: () => { },
    },
  },
  watch: {
    visible(val) {
      if (val) {
        const { formInfo } = JSON.parse(JSON.stringify(this.default || '{}'));
        console.log(formInfo);
        Object.keys(formInfo).map((key) => {
          console.log(key + '---' + formInfo[key]);
          this.form[key] = formInfo[key];
        });
        console.log(this.form);
        // planConditionConfigVOList.map((item) => {
        //   const { label, labelName, content } = item;
        //   const _content = content || '';
        //   if (labelName === '年龄') {
        //     this.form[label] = _content;
        //     const age = _content.split('-');
        //     this.age1 = age[0] || '';
        //     this.age2 = age[1] || '';
        //   } else {
        //     this.form[label] = _content.split(',');
        //   }
        // });
      }
    },
  },
  data() {
    return {
      activeKey: ['1', '2', '3'],
      modalLoading: false,
      form: {
        age: '',
        sex: '',
        loanAmount: '',
        house: '',
        car: '',
        accumulation: '',
        sesameSeed: '',
        overdueSituation: '',
        profession: '',
        socialSecurity: '',
        insurance: '',
        huabei: '',
        jdQuota: '',
      },
    };
  },
  mounted() {
    this.getSelect();
  },
  methods: {
    getSelect() {
      Ajax.getChannelSelect().then((res) => {
        if (res.success) {
          this.treeData = Array.isArray(res.data)
            ? res.data.map((it) => ({
              ...it,
              title: it.channelName,
              value: it.id,
            }))
            : [];
        }
      });
    },
    handleModalConfirm() {
      this.modalLoading = true;
      const params = {
        id: this.id,
        elementPackageDTO: this.form,
      };
      Ajax.analyseClueList(params).then(({ success }) => {
        if (success) {
          this.$message.success('保存成功');
          this.$emit('success');
          this.handleModalCancel();
        }
      }).finally(() => {
        this.modalLoading = false;
      });
    },
    handleModalCancel() {
      this.form = this.$options.data().form;
      this.$emit('close');
    },
  },
};
</script>

<style lang="scss" scoped>
.table-wrap {
  margin-top: 20px;
  padding-top: 16px;
}

.btn-gruop {
  display: flex;
  justify-content: flex-end;
}

::v-deep .ant-collapse-borderless>.ant-collapse-item {
  border: none;
}

::v-deep .ant-collapse-borderless {
  background-color: #fff;
}

::v-deep .ant-collapse>.ant-collapse-item>.ant-collapse-header {
  color: rgba(0, 0, 0, .85);
  font-weight: 500;
  font-size: 16px;
}

::v-deep .ant-collapse-content-box {
  padding: 0 !important;
}

::v-deep .ant-divider {
  margin: 16px 0 12px;
}

::v-deep .ant-collapse {
  .ant-form-item {
    margin-bottom: 6px;
  }
}

::v-deep .ant-form-item {
  margin-bottom: 0px;

  &:last-child {
    margin-bottom: 0;
  }
}
</style>
